<template>
  <div class="container">
    <div class="top_container_row">
      <el-row class="conditionBar">
        <!-- 筛选条件 -->
        <el-col class="conditionBar" :offset="8" :span="8">
          <div class="top_container">
            <el-checkbox v-for=" (value, key) in queryParams.params.params" 
              @change="conditionChange"
              :key="key" v-model="queryParams.params.params[key]">{{paramNames[key]}}
            </el-checkbox>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="top_container">
            <!-- 生词熟词选择 -->
            <el-dropdown @command="rememberCommand">
              <span style="cursor: pointer; color: #409EFF;">
                {{rememberMenu.selection[rememberMenu.selected]}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in rememberMenu.selection" :key="index" :command="index">{{item}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button type="primary" @click="toggleRemember">{{toggleRememberButtonName}}</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    
    <!-- 单词渲染 -->
    <div style="margin-top: 50px; margin-bottom: 50px">
      <el-button v-for="(item, index) in words" :key="item.id" :id='item.id' 
        class="wordbox" v-show="item.show" @click="leftClick(item.id, index)"
        :style="`color: ${item.choose?'red':''};`"
        @contextmenu.prevent.native="rightClick($event, index)"
      >{{item.word}}</el-button>
    </div>
    
    <!-- 分页页脚 -->
    <PaginationFooter 
        @current-change="page_change" @size-change="size_change"
        :page-size="200" :page-sizes="[100,200,300,400]"
        :total="pagination.total" />

    <RightMenu :menuList="rightMenu.menuList" 
              :position="rightMenu.position" 
              :visible="rightMenu.visible" ref="rightMenu"/>
    
    <!-- 悬浮提示 -->
    <div class="hovertip" v-show="tip.visible"
        :style="`top:${tip.position.top}px;left:${tip.position.left}px;z-index:999`" 
        @mouseout="mouseoutTip" @mouseover="mouseoverTip">
      <div class="title" style="font-size: 18px;color: rgb(56, 56, 56); display:flex;flex-direction:row; margin-bottom:5px" @mouseover="mouseoverTip">
          {{tip.title}}
          <div @mouseover="mouseoverTip" style="margin-left:5px">
              <el-button @click="audioPlay(tip.title)" icon="el-icon-video-play" circle style="width:20px;height:20px;padding:0"></el-button>
          </div>
      </div>
      <div class="line" style="width: 100%;height: 1px;background: rgb(202, 202, 202);" @mouseover="mouseoverTip"></div>
      <div class="text" style="color: rgb(32, 32, 32);" @mouseover="mouseoverTip">{{tip.text}}</div>
      <div class="text" style="color: rgb(32, 32, 32); margin-top: 5px; margin-bottom: 5px; text-align:left" @mouseover="mouseoverTip"
          v-for="(sentence,index) in tip.sentence" :key="index">
        <span style="color: #409eff;">{{index+1}}</span>. {{sentence}}
      </div>
    </div>
  </div>

</template>

<script>
import { getWords } from '@/api/getWords'
import RightMenu from '@/components/RightMenu'
import PaginationFooter from '@/components/PaginationFooter'
import _ from "lodash"
import request from '@/request'

export default {
  components: { RightMenu, PaginationFooter },
  name: 'WordPage',
  data(){
    return {
      pagination: {
        total: 0, 
      },
      words: null,  selectedIds: {},
      queryParams: {
        size: 200, current: 1, 
        params: {
          remembered: false, uid: '1',
          params: { cet4: null, cet6: null, ky: null }
        }
      },
      paramNames: {
        cet4: 'CET4', cet6: 'CET6', ky: '考研'
      },
      rememberMenu: {
        selection: ['生词', '熟词'], selected: 0
      },
      rightMenu: {
        position: { top: 500, left: 500 }, visible: false,
        menuList: null
      },
      tip:{
        position: { top: 500, left: 500 }, visible: false,
        title: null, text: null, sentence: [],
        clock: null
      }
    }
  },
  computed: {
    toggleRememberButtonName(){
      var toggleTarget = this.rememberMenu.selection[(this.rememberMenu.selected+1)%2]
      return `将已选转到${toggleTarget}`
    }
  },
  mounted: function(){
    this.queryWord()
    this.audio = document.createElement('audio');
    var that = this
    this.rightMenu.menuList = [
      {'name' : '查看释义', 'function': that.menuListTest}
    ]
  },
  methods:{
    queryWord(){
      getWords(this.queryParams).then(response=>{
        var data = response.data.data
        this.pagination.total = data.total
        this.words = data.records
        this.words.forEach(word => { word.show=true; word.choose=false });
      })
    },
    rememberCommand(command){
      this.rememberMenu.selected = command
      this.queryParams.params.remembered = (command == 1);
      this.queryWord()
    },
    toggleRemember(){
      request({
        method: 'post', url: '/word/updateRemember', 
        data: {
          uid: '1', remembered: !this.queryParams.params.remembered,
          params: _.values(this.selectedIds)
        }
      })
      _.keys(this.selectedIds).map(key=>this.words[key].show=false)
      this.$forceUpdate()
    },
    conditionChange(){
      this.queryWord()
    },
    page_change(page){ 
      this.queryParams.current = page
      this.queryWord()
    },
    size_change(size){
      this.queryParams.size = size
      this.queryWord()
    },
    menuListTest(){
      console.log("menuListTest");
    },
    test(e){ 
      console.log(e) 
    },
    leftClick(id, index){
      if(this.selectedIds[index])  {
        this.words[index].choose = false
        delete this.selectedIds[index]
      }
      else{
        this.words[index].choose = true
        this.selectedIds[index] = id
      }
      this.$forceUpdate()
    },
    rightClick(e, index){
      var word = this.words[index]
      var WHeight = window.innerHeight
      var WWidth = window.innerWidth
      try{
        this.tip.visible = true; 
        this.tip.position = { 
          top: (WHeight - e.y)>150? e.y-1: WHeight - 150, 
          left:(WWidth - e.x)>300? e.x-1: WWidth - 300
        }
        this.tip.title = word.word
        this.tip.text = word.meaning.replace('&lt;br&gt',' ').replace('&amp',' ')
        var sentences = word.sentence.split('/r/n')
        this.tip.sentence = []
        for(var i=0;i<sentences.length;i++)
          if(!/[\u4e00-\u9fa5]/.test(sentences[i]) && sentences[i]!='')
            this.tip.sentence.push(sentences[i].replace('&apos;','\'').trim())
        this.boxClick = true
      }catch(e){
        console.log(e); this.$message('暂无释义');
      }
    },
    // 悬浮提示
    mouseoutTip(e){
      this.tip.clock = setTimeout(()=>{ this.tip.visible = false },300)
    },
    mouseoverTip(e){ clearTimeout(this.tip.clock) },
    audioPlay(word){
      this.audio.src = `https://dict.youdao.com/dictvoice?type=0&audio=${word}`
      this.audio.play()
    },
  }
}
</script>

<style>
.wordbox{
  width: fit-content; padding: 5px; margin: 4px;
  line-height: 15px; font-size: 15px;
  justify-content: center; 
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 0 6px rgba(0, 0, 0, .1)
}

.top_container_row{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 0 6px rgba(0, 0, 0, .1);
  position: fixed; top: 61px; left: 0;
  width: 100%;
  background: white;
}
.top_container{
  line-height: 50px;
}
.top_container .el-button{
  height: 40px; margin-top: 5px;
}

.conditionBar{
  height: 50px;
}

.container{
  width: 100vw;
}

.top_container{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.hovertip{
  display: flex; justify-content: center; align-items: flex-start; flex-direction: column;
  padding: 6px;
  width: auto; height: auto; min-width: 100px;
  position:absolute; background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 0 6px rgba(0, 0, 0, .1);
}
</style>
